<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>008-HTML5新的Input类型</title>
	</head>
	<body>
		<!-- Input 类型: color -->
		<label for="color">Color:</label>
		<input type="color" name="color" value="#ff0000" />
		<hr />

		<!-- Input 类型: date -->
		<label for="date">Date:</label>
		<input type="date" id="date" name="date" />
		<hr />

		<!-- Input 类型: datetime -->
		<label for="datetime">生日 (日期和时间):</label>
		<input type="datetime" id="datetime" name="datetime" />
		<hr />

		<!-- Input 类型: datetime-local -->
		<label for="datetime-local">生日 (日期和时间):</label>
		<input type="datetime-local" id="datetime-local" name="datetime-local" />
		<hr />

		<!-- Input 类型: email -->
		<label for="email">Email:</label>
		<input type="email" id="email" name="email" />
		<hr />

		<!-- Input 类型: month -->
		<label for="month">Month:</label>
		<input type="month" id="month" name="month" />
		<hr />

		<!--
    Input 类型: number

    属性	描述
    disabled	规定输入字段是禁用的
    max	规定允许的最大值
    maxlength	规定输入字段的最大字符长度
    min	规定允许的最小值
    pattern	规定用于验证输入字段的模式
    readonly	规定输入字段的值无法修改
    required	规定输入字段的值是必需的
    size	规定输入字段中的可见字符数
    step	规定输入字段的合法数字间隔
    value	规定输入字段的默认值
     -->
		<label for="number">Number:</label>
		<input type="number" id="number" name="number" min="1" max="5" />
		<hr />

		<!--
    Input 类型: range
    range 类型用于应该包含一定范围内数字值的输入域。
    range 类型显示为滑动条。
    max - 规定允许的最大值
    min - 规定允许的最小值
    step - 规定合法的数字间隔
    value - 规定默认值
    -->
		<label for="range">Range:</label>
		<input type="range" name="points" min="1" max="10" />
		<hr />

		<!-- Input 类型: search -->
		<label for="search">Search:</label>
		<input type="search" id="search" name="search" />
		<hr />

		<!-- Input 类型: tel -->
		<label for="tel">Tel:</label>
		<input type="tel" id="tel" name="tel" />
		<hr />

		<!-- Input 类型: time -->
		<label for="time">Time:</label>
		<input type="time" id="time" name="time" />
		<hr />

		<!--
    Input 类型: url
    在提交表单时，会自动验证 url 域的值。
    -->
		<label for="url">URL:</label>
		<input type="url" id="url" name="url" />
		<hr />

		<!-- Input 类型: week -->
		<label for="week">Week:</label>
		<input type="week" id="week" name="week" />
	</body>
</html>
